<template>
  <div class="nav-container">
    <nav class="navbar navbar-expand-lg navbar-light my-nav">
      <a class="navbar-brand" href="/">
        <!-- <img src="../../static/images/logo.png"  style="width:50px;"/> -->
        <h1 style="margin:15px 5px;color:#fff">桂花糖</h1>
      </a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">导航</button>
      <div class="collapse navbar-collapse my-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto my-navbar-nav">
          <li class="nav-item">
            <router-link to="/" class="nav-link my-nav-link">首页</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/kline" class="nav-link my-nav-link">K线图</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/mhpicture" class="nav-link my-nav-link">分时图</router-link>
          </li>
          <!-- <li class="nav-item">
            <router-link to="/servercenter" class="nav-link my-nav-link">服务中心展示</router-link>
          </li> --> 
          <li class="nav-item">
            <router-link to="/advertisement" class="nav-link my-nav-link">广告宝</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/playskill" class="nav-link my-nav-link">玩法技巧</router-link>
          </li>
          <li class="nav-item">
            <router-link to="/news" class="nav-link my-nav-link">区块链资讯</router-link>
          </li>
        </ul>
      </div>
    </nav>
    <div class="navrightInfo right">  
      <nav-login color="#fff"></nav-login>
    </div>
  </div>
</template>
<script>
import store from '@/store'
import { setUser,getUser, removeUser} from '@/utils/auth'
import navLogin from "@/components/nav_login";
  export default {
    name: "mynav",
    components: {
      navLogin,
    },
    data(){
      return { }
    }
  }
</script>
<style lang="less" scoped> 
  .nav-container {
    z-index:1;
    position: relative; 
    .my-nav {
      position: absolute;
      background:rgba(0,0,0,.5);
      line-height:35px; 
      width: 100%;  
      .navbar-toggler {
        color: #fff;
      }
      .navbar-brand {
        margin-right: 4rem;
      }
      .my-navbar-nav {
        text-align:left;
        line-height:35px;
            margin-left: 25%;
        // background:rgba(0,0,0,.5); 
        .my-nav-link {
          color: #fff;
          font-size: 1.8rem;
          padding: 15px 25px;
          &:hover {
            color: #3c80ef;
          }
        }
      }
    }
    @media (max-width: 992px) {
      .my-nav{
        line-height:60px;
        .my-navbar-nav {margin-left:0px}
      }
    }
  }
  .navrightInfo{
    width:100px;
   position:absolute;
   right:50px;
    top:25px;
   font-size:14px;
   cursor: pointer;
   color:#fff; 
   .el-dropdown{
     .el-dropdown-link{
       color:#fff;
     }
   }
  }
</style>
